<!--文件属性面板-->
<template>
  <div class="flex-main filePropertyPanel">
    <template v-if="currentSelectedData.id">
      <div class="__header flex-row">
        <div class="file-icon">
          <file-catalog-svg-icon v-if="currentSelectedData.isFile == false" :type="currentSelectedData.catalogType" />
          <file-viewer
            v-if="currentSelectedData.isFile == true"
            :type="currentSelectedData.fileType"
            :url="currentSelectedData.fileUuid"
            :title-show="false"
            :title="currentSelectedData.originalFileName" />
        </div>
        <div class="file-name ">
          <div class="name">
            <span v-if="currentSelectedData.isFile" class="name-text">{{ currentSelectedData.originalFileName }}</span>
            <span v-if="!currentSelectedData.isFile" class="name-text">
              {{ currentSelectedData.catalogName }}
              <copy-text :content="currentSelectedData.id" :show="false" />

            </span>
          </div>
          <div class="desc">
            <span v-if="currentSelectedData.isFile" class="info-item info-item-size">
              {{ currentSelectedData.fileSize | formatFileSize }}
            </span>
            <span v-if="currentSelectedData.isFile" class="info-item">, </span>
            <span class="info-item info-item-time"> {{ currentSelectedData.gmtCreated | formatDate }} </span>
          </div>
        </div>

      </div>
      <div style="" class="__body">
        <div class="file-info-basic info-group has-content show-more-allow">
          <div class="p info-item-path" style="line-height:25px">
            <div class="title">路径:</div>
            <div class="content" style="color: #aaa;padding:0px">
              <span v-for="(item,index) in filePath" :key="index">
                <span class="link ripple-item">
                  {{ item.catalogName }}
                  <i v-if="!currentSelectedData.isFile && index != filePath.length-1">/</i>
                  <i v-if="currentSelectedData.isFile">/</i>
                </span>
              </span>
              <span v-if="currentSelectedData.isFile" class="link ripple-item">{{ currentSelectedData.originalFileName }}.{{ currentSelectedData.fileExt }}</span>
            </div>
            <div class="clearfix" />
          </div>
          <div v-if="currentSelectedData.isFile" class="p">
            <div class="title">标识:</div>
            <div class="content"> <copy-text :content="currentSelectedData.fileUuid" position="left" /></div>
            <div class="clearfix" />
          </div>
          <div v-if="currentSelectedData.isFile" class="p info-item-size">
            <div class="title">大小:</div>
            <div class="content"> {{ currentSelectedData.fileSize | formatFileSize }} <span>({{ currentSelectedData.fileSize }} Byte)</span></div>
            <div class="clearfix" />
          </div>
          <div class="p">
            <div class="title">创建时间:</div>
            <div class="content">{{ currentSelectedData.gmtCreated | formatDate }}</div>
            <div class="clearfix" />
          </div>
          <div class="p">
            <div class="title">修改时间:</div>
            <div class="content">{{ currentSelectedData.gmtModified | formatDate }}</div>
            <div class="clearfix" />
          </div>
          <div class="p">
            <div class="title">创建者:</div>
            <div class="content">
              <span class="name">
                <template v-if="currentSelectedData.isBuiltIn===1">内置</template>
                <template v-else>
                  {{ currentSelectedData.realName }}({{ currentSelectedData.userName }})
                </template>
              </span>
            </div>
            <div class="clearfix" />
          </div>
          <div v-if="currentSelectedData.isFile" class="p">
            <div class="title">URL:</div>
            <div class="content">
              <copy-text :content="global.getFileView(currentSelectedData.fileUuid)" position="left" />
            </div>
            <div class="clearfix" />
          </div>
          <template v-if="currentSelectedData.isFile == false">
            <div v-if="currentSelectedData.isEncryption===1" class="p ">
              <div class="title">是否加密:</div>
              <div class="content">
                <span class="name color-danger"> 加密 </span>
              </div>
              <div class="clearfix" />
            </div>
            <div v-if="currentSelectedData.isAllowNewFile===0" class="p ">
              <div class="title">新建文件:</div>
              <div class="content">
                <span class="name color-danger">不允许</span>
              </div>
              <div class="clearfix" />
            </div>
            <div v-if="currentSelectedData.isAllowNewFolder===0" class="p ">
              <div class="title">新建文件夹:</div>
              <div class="content">
                <span class="name color-danger">不允许</span>
              </div>
              <div class="clearfix" />
            </div>
            <div v-if="currentSelectedData.isAllowRead===1" class="p ">
              <div class="title">是否只读:</div>
              <div class="content">
                <span class="name color-danger">只读</span>
              </div>
              <div class="clearfix" />
            </div>
            <div v-if="currentSelectedData.isAllowDeleted===0" class="p ">
              <div class="title">允许删除:</div>
              <div class="content">
                <span class="name color-danger">不允许</span>
              </div>
              <div class="clearfix" />
            </div>

          </template>
        </div>
      </div>
    </template>
    <el-empty v-else description="暂无文件属性" />

  </div>
</template>
<script>
export default {
  data() {
    return {
      currentSelectedData: {},
      filePath: []

    }
  },
  methods: {
    async init(isFile, id, filePath = []) {
      this.filePath = filePath
      var res = {}
      if (isFile) {
        res = await this.$store.dispatch('getFileResourcesById', id)
      } else {
        res = await this.$store.dispatch('getFileCatalogById', id)
      }
      this.currentSelectedData = {
        ...res,
        isFile: isFile
      }
    }

  }
}
</script>
<style lang="scss" scoped>
 .filePropertyPanel{
    .__header{
      background: #f6faff;
      background-image: linear-gradient(190deg, #e5f6ff, #fdfeff);
      border-bottom: 1px solid #eee;
      position: relative;
      z-index: 2;
      padding: 8px 6px;
      .file-icon{
        svg{
          width: 50px;
          height: 50px;
        }
        img{
          width: 50px;
          height: 50px;
        }
      }
      .file-name {
        margin-left: 10px;
        .name {
          line-height: 1.2em;
          padding-top: 7px;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 15px;
          color: #666;
          word-break: break-all;
          .name-text {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
          }
        }
        .desc {
          font-size: .9em;
          color: #aaa;
          padding-top: 1px;
          white-space: nowrap;
        }
      }
    }
    .__body{
      height:100%;
      overflow: auto;
      padding: 10px;
      .p{
        padding-left: 15px;
        padding-right: 10px;
        line-height: 20px;
        margin-bottom: 0px;
        .title {
          float: left;
          color: #999;
          text-align: left;
          padding: 0;
          margin: 0;
          line-height: 25px;
          width: 27%;
          margin-right: 1%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .content {
          float: left;
          word-break: break-all;
          color: #444;
          width: 72%;
          margin: 0;
          padding: 5px 0 0 0;
          position: relative;
          user-select: text;
          font-size: 1em;
        }
      }
    }
  }
</style>
